<template>
<div>
 <h1>{{state.count}} * 2 = {{double}}</h1>
 <h2>{{num}}</h2>
 <button @click="add">累加</button>
 </div>
</template>

<script setup>
  // 将变量变成响应式
  import { reactive, ref, computed, onMounted } from 'vue' 

  // 更贴近于原生js开发
  const state = reactive({
    count: 1
  })

  let double = ref(2)

  function add() {
   state.count++
   double.value = state.count*2
  }

  const num = computed(() => state.count + 10) 

  onMounted(() => {
    console.log(onMounted);
  })

  // vue2里面的data，methods，computed都是挂载在this上的，这有两个明显的缺点
  // 1. 不利于类型推导
  // 2. 如果一个项目自始至终都没有用过computed，但computed也会被打包

  // vue3的手动引入写法更利于 Tree-shaking，打包体积更小
</script>

<style scoped>

</style>
